// 拖拽点left,top,cursor
@pointer: {
    top: 50%, 0, ns-resize;
    top-right: 100%, 0, nesw-resize;
    right: 100%, 50%, ew-resize;
    right-bottom: 100%, 100%, nwse-resize;
    bottom: 50%, 100%, ns-resize;
    bottom-left: 0, 100%, nesw-resize;
    left: 0, 50%, ew-resize;
    left-top: 0, 0, nwse-resize;
}

;
@border-color: #39f;
@pointer-color: @border-color;
@button-size: 26px;
@sizecolor-size: 24px;

.screenshots {
    position: relative;

    &-canvas {
        width: 100%;
        height: 100%;
        position: relative;

        &-mask {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.4);
        }
    }

    &-magnifier {
        position: absolute;
        left: 0;
        top: 0;
        box-shadow: 0 0 8px 0px #000;
        z-index: 9;

        &-canvas {
            position: relative;
            background-color: #fff;

            canvas {
                display: block;
            }

            &-crosshair {
                &::before {
                    content: '';
                    background-color: rgb(10, 114, 161);
                    position: absolute;
                    top: 50%;
                    left: 0;
                    width: 100%;
                    height: 1px;
                }

                &::after {
                    content: '';
                    background-color: rgb(10, 114, 161);
                    position: absolute;
                    top: 0;
                    left: 50%;
                    width: 1px;
                    height: 100%;
                }
            }
        }

        &-explain {
            width: 120px;
            height: 40px;
            color: #fff;
            font-size: 10px;
            background-color: rgb(95, 94, 94);
            padding: 7px 8px;

            &-rgb {
                margin-bottom: 4px;
            }
        }
    }

    &-viewer {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;

        &-body {
            position: absolute;
            overflow: hidden;

            canvas {
                display: block;
            }
        }

        &-border {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            border: 1px solid @border-color;
        }

        each(@pointer, {
                &-pointer-@{key} {
                    width: 6px;
                    height: 6px;
                    position: absolute;
                    left: extract(@value, 1);
                    top: extract(@value, 2);
                    background-color: @pointer-color;
                    border-radius: 50%;
                    transform: translate(-50%, -50%);
                    cursor: extract(@value, 3);
                }
            }

        )
    }
}